<template>
  <div class="container">
    <div class="head_container">
      <div class="id_container">ID:{{ id }}</div>
      <div class="text_container">答题</div>
    </div>
    <div class="selectNavigation">
      <span class="selectedContent">答案内容</span>
      <span class="selectedContent">选择结果</span>
      <span class="selectedContent">节点类型</span>
    </div>
    <div class="rich_text_container">
      <span style="width: 72px; height: 24px; color: #c4c4c4; padding-top: 12px">答案选项</span>
      <div class="selected_container">
        <div>
          <div v-for="(item, index) in selectGroup" :key="index">
            <div
              class="row-input-container"
              :class="{ selected: index === selectedIndex }"
              @click="selectRow(index)"
            >
              <div class="select-content">
                <el-input
                  v-model="item.selectContent"
                  placeholder="请输入选项内容"
                  :disabled="isButtonDisabled === true && item.id === -1"
                />
              </div>
              <div class="select-content">
                <el-input
                  v-model="item.selectResult"
                  placeholder="请输入选项结果"
                />
              </div>

              <div class="select-content" >
                <el-select v-model="item.moduleType"  >
                  <el-option  v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                </el-select>
              </div>

              <div class="delete-container" @click="deleteItem(index, item)">
                <img src="/svg/trashCan.svg" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="button-container">
      <button class="button" @click="handleButton">
        <img  src="/svg/plus.svg" style="background-color: #ff8d1a; border-radius: 50%"/>
        <span class="button-word">添加正确答案</span>
      </button>
    </div>
    <div class="error-button-container">
      <button class="button" :disabled="isButtonDisabled" :style="buttonStyle" @click="handleErrorButton" >
        <img src="/svg/plus.svg" :style="imgStyle" />
        <span class="button-word">添加错误答案(只能添加一次)</span>
      </button>
    </div>

    <div class="rich_text_container">
      <span style="width: 72px; height: 24px; color: #c4c4c4; padding-top: 12px">提示选项</span>
      <div class="selected_container">
        <div>
          <div v-for="(item, index) in tipsList" :key="index">
            <div class="row-input-container">
              <div class="select-content">
                <el-input
                  disabled
                  :value="'选项' + (index + 1)"
                  placeholder=""
                  style="width: 100px"
                />
              </div>
              <div>
                <el-input
                  v-model="item.value"
                  placeholder="提示内容"
                  style="width: 400px"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button class="saveButton" @click="handleSave()">保存</button>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, PropType, watch } from "vue";
import { ref } from "vue";
import { useDirectoryStore } from "@/store/modules/directory";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  name: "QuestionAnswerEditor",
  props: {
    sort:{
      type: Number as PropType<number>,
      default: "0000"
    },
    currentSort:{
      type: String as PropType<string>,
      default: "0000"
    },
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    isChildSelected: {
      type: Number as PropType<number>,
      default: 0
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {
        moduleValue: {
          value: [
            {
              selectContent: "默认选项内容",
              selectResult: "默认节点"
            }
          ]
        },
        moduleNext: ""
      }
    }
  },
  emits: ["save"], // 定义自定义事件
  setup(props, { emit }) {
    const selectedIndex = ref<number | null>(0); // 默认选中第一行
    let nextSubSort = ref<number | null>(0);
    onMounted(() => {
      if (props.valueFromParent.moduleValue?.value) {
        isButtonDisabled.value = props.valueFromParent.moduleValue?.value.some(
          item => item.id === -1
        );
      } else {
        isButtonDisabled.value = false;
      }
     
      selectedIndex.value = props.isChildSelected;
    });
    const isButtonDisabled = ref(false);
    const selectGroup = ref(props.valueFromParent.moduleValue?.value || []);
    const tipsList = ref(
      props.valueFromParent.moduleValue?.tipsList || [
        {
          id: 1,
          value: "提示内容1"
        },
        {
          id: 2,
          value: "提示内容2"
        },
        {
          id: 3,
          value: "提示内容3"
        }
      ]
    );
    const imgStyle = computed(() => {
      return isButtonDisabled.value
        ? "background-color: gray; border-radius: 50%"
        : "background-color: #ff8d1a; border-radius: 50%";
    });
    const buttonStyle = computed(() => {
      return isButtonDisabled.value
        ? "color: gray"
        : "color: rgba(255, 141, 26, 1);";
    });
    const createNewItem = () => {
      nextSubSort.value = nextSubSort.value + 1;
      let showId =  props.currentSort  + nextSubSort.value
      const newItem = {
        id: 0,
        selectContent: "答案->"+props.sort + '-' + showId,
        selectResult:   props.sort + '-' + showId,
        moduleType:'文本'
      };
      return newItem;
    };

    const handleButton = () => {
      const newItem = createNewItem();
      if (selectGroup.value.length > 0) {
        newItem.id = selectGroup.value.length + 1;
      } else {
        newItem.id = 1;
      }
      selectGroup.value.push(newItem);
    };
    const selectRow = index => {
      selectedIndex.value = index;
    };
    const handleErrorButton = () => {
      nextSubSort.value = nextSubSort.value + 1;
      let showId =  props.currentSort  + nextSubSort.value
      const newItem = {
        id: -1,
        selectContent: "错误答案->"+props.sort + '-' + showId,
        selectResult: props.sort + '-' + showId,
        moduleType:'文本'
      };
      selectGroup.value.push(newItem);
      // 错误选项的按钮 变灰
      isButtonDisabled.value = true;
    };
    const handleSave = () => {
      props.valueFromParent.moduleValue.value = selectGroup.value;
      props.valueFromParent.moduleValue.tipsList = tipsList.value;
      let errorNode = selectGroup.value.find(item => item.id === -1);
      if (errorNode) {
        props.valueFromParent.moduleValue.error_node = errorNode.selectResult;
      }
      const updatedContent = { ...props.valueFromParent };
      emit("save", updatedContent); // 触发save事件并传递
    };

    const deleteItem = (index, item) => {
      if (item.id === -1) {
        console.log(item);
        isButtonDisabled.value = false;
        props.valueFromParent.moduleValue.error_node = "";
        selectGroup.value.splice(index, 1);
        selectGroup.value.forEach((item, idx) => {
          if (item.id !== -1) {
            item.id = idx + 1; // 假设你需要重新设置 id
          }
        });
      } else {
        selectGroup.value.splice(index, 1);
        selectGroup.value.forEach((item, idx) => {
          if (item.id !== -1) {
            item.id = idx + 1; // 假设你需要重新设置 id
          }
        });
      }
      if (props.isChildSelected === index) {
        selectedIndex.value = 0;
      }
    };

    watch(
      () => props.valueFromParent,
      newVal => {
        selectGroup.value = newVal.moduleValue?.value || [];
        tipsList.value = newVal.moduleValue?.tipsList || [
          {
            id: 1,
            value: "提示内容11"
          },
          {
            id: 2,
            value: "提示内容2"
          },
          {
            id: 3,
            value: "提示内容3"
          }
        ];
      },
      { deep: true }
    );
    watch(
      () => props.isChildSelected,
      newVal => {
        console.log("观察111");
        console.log(newVal);
        selectedIndex.value = newVal;
      }
    );

    return {
      handleSave,
      selectGroup,
      createNewItem,
      handleButton,
      handleErrorButton,
      deleteItem,
      tipsList,
      isButtonDisabled,
      imgStyle,
      buttonStyle,
      selectRow,
      selectedIndex
    };
  }
});
</script>

<style scoped>
.row-input-container.selected .select-content .el-input,
.row-input-container.selected .select-result .el-input {
  border: 1px solid #ff8d1a; /* 加粗的绿色边框 */
  border-radius: 5px; /* 可选：圆角 */
  box-shadow: 0 0 5px #ff8d1a; /* 可选：添加阴影效果 */
}
.error-button-container {
  padding-left: 170px;
  padding-bottom: 17px;

  .button {
    left: 3713px;
    top: 2928.38px;
    width: 500px;
    height: 50px;
    opacity: 1;
    border-radius: 10px;
    background: #404040;
    box-shadow: 0px 2px 4px #000000;
    .button-word {
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.27px;
      text-align: center;
      vertical-align: top;
    }
  }
}
.button-container {
  padding-left: 170px;
  margin-top: 10px;
  .button {
    left: 3713px;
    top: 2928.38px;
    width: 500px;
    height: 50px;
    opacity: 1;
    border-radius: 10px;
    background: #404040;
    box-shadow: 0px 2px 4px #000000;
    .button-word {
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.27px;
      text-align: center;
      vertical-align: top;
      color: rgba(255, 141, 26, 1);
    }
  }
}

.row-input-container {
  display: flex;
  margin-bottom: 5px;
  
}
.row-input-container /deep/ .el-input {
  width: 150px;
  margin-left: 10px;
}

.row-input-container /deep/ .el-select {
  width: 150px;
  margin-left: 10px;
}

.delete-container {
  width: 50px;
}

.selectNavigation {
  padding-left: 200px;
  .selectedContent {
    opacity: 1;
    /** 文本1 */
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 21.22px;
    color: rgba(229, 229, 229, 1);
    text-align: left;
    vertical-align: top;
    padding-right: 120px;
  }
}

.selected_container {
  left: 200px;
  top: 115px;
  width: 644px;
 
  opacity: 1;
  border-radius: 10px;
  margin-left: 40px;
}

.rich_text_container {
  display: flex;
  margin-left: 66.5px;
  margin-top: 10px;
}

.head_container {
  width: 811px;
  height: 55px;
  background-color: #525252;
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .id_container {
    width: 75px;
    height: 25px;
    color: #a3a3a3;
    margin-left: 20px;
    margin-right: 298.5px;
  }

  .text_container {
    width: 44px;
    height: 30px;
  }
}

.container {
  width: 811px;
  background-color: #383838;
}

textarea {
  width: 100%;
  box-sizing: border-box;
}

.saveButton {
  height: 60px;
  width: 671px;
  background-color: #ff8d1a;
  color: #78491b;
  margin-left: 66.5px;
  border-radius: 10px;
  margin-bottom: 30px;
  margin-top: 20px;
}

html.dark {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
}

button {
  background-color: #ff8d1a;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
}

button:hover {
  background-color: #e67e22;
}
</style>
